<template>
  <view class="sittle-box">
    <view class="checkedAll" @click="changeCheck">
      <radio :checked="fullCheck" color="#C00000" /><text>全选</text>
    </view>
    <view class="countAll">
      合计:<text>￥{{checkedGoodsAmount}}</text>
    </view>
    <view class="sittle" @click="gotoSettle">
      结算<text>({{fullCount}})</text>
    </view>
  </view>
</template>

<script>
  import {mapGetters, mapMutations, mapState} from 'vuex'
  export default {
    name:"my-sittle",
    data() {
      return {
        seconds: 3,
        timer: null
      };
    },
    computed: {
      ...mapGetters('m_cart', ['fullCount', 'total', 'checkedGoodsAmount']),
      ...mapState('m_cart', ['cart']),
      ...mapGetters('m_user', ['addrstr']),
      ...mapState('m_user', ['token']),
      // 判断当前选中商品和总商品数是否相同
      fullCheck() {
        return this.fullCount == this.total
      }
    },
    methods: {
      ...mapMutations('m_cart', ['checkAll']),
      ...mapMutations('m_user', ['updataRedirectInfo']),
      // 全选商品
      changeCheck() {
        this.checkAll(!this.fullCheck)
      },
      
      // 结算选中商品
      gotoSettle() {
        if(!this.fullCount) return uni.showMsg('请选择想要购买的商品！')
        if(!this.addrstr) return uni.showMsg('请选择您的收货地址！')
        // if(!this.token) return uni.showMsg('请先登录！')
        if(!this.token) return this.delayNavigate()
        
        this.payOlder()
      },
      
      // 微信支付
      async payOlder() {
        const orderInfo = {
          order_price: 0.01,
          consignee_addr: this.addrstr,
          goods: this.cart.filter(x => x.goods_state).map(x => ({
            goods_id: x.goods_id,
            goods_number: x.goods_count,
            goods_price: x.goods_price
          }))
        }
        const {data: res} = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
        if(res.meta.status !== 200) return uni.showMsg('订单创建失败！')
        const orderNumber = res.message.order_number
        
        const {data: res2} = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {order_number:orderNumber})
        if(res2.meta.status !== 200) return uni.showMsg('订单预支付失败！')
        const payInfo = res2.message.pay
        
        const [err, succ] = uni.requestPayment(payInfo)
        if(err) return uni.showMsg('订单未支付成功！')
        const {data: res3} = await uni.$http.post('/api/public/v1/my/orders/chkOrder', {order_number: orderNumber})
        if(res3.meta.status !== 200) return uni.showMsg('订单未支付成功！')
        uni.showToast({
          title: '订单支付成功！',
          icon: 'success'
        })
      },
      
      // 倒计时自动跳转页面
      delayNavigate() {
        this.seconds = 3
        this.showTipe(this.seconds)
        clearInterval(this.timer)
        
        this.timer = setInterval(() => {
          this.seconds--
          this.showTipe(this.seconds)
          if(this.seconds <= 0) {
            clearInterval(this.timer)
            uni.switchTab({
              url: '/pages/my/my',
              success: () => {
                this.updataRedirectInfo({
                  openType: 'switchTab',
                  from: '/pages/cart/cart'
                })
              }
            })
          }
        }, 1000)
      },
      
      // 倒计时自动跳转页面提示
      showTipe(n) {
        uni.showToast({
          icon: 'none',
          title: '请登陆后再结算，'+n+'秒之后自动跳转到登陆页面',
          duration: 1500
        })
      }
    }
  }
</script>

<style lang="scss">
.sittle-box {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  .checkedAll {
    display: flex;
    align-items: center;
  }
  .countAll {
    text {
      font-weight: bold;
      color: #C00000
    }
  }
  .sittle{
    height: 100rpx;
    min-width: 200rpx;
    line-height: 100rpx;
    text-align: center;
    color: white;
    background-color: #C00000;
  }
}
</style>